const textContainer = document.querySelector('.text-container');
const textElem = document.querySelector('.text');
const cursor = document.querySelector('.cursor');

async function autoAppend() {
  function delay(duration) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve();
      }, duration);
    });
  }
  function transfer(text) {
    let result = text
      .split('\n')
      .map((t) => `<p>${t}</p>`)
      .join('');
    return result;
  }
  const content = `音频和视频
  
  文件的元
  数据可能包含一些
  
  信息，如标题、艺术家、专辑等。然而，文件的创建时间通常不存储在文件元数据中，而是由文件系统处理。`;

  for (let i = 0; i < content.length; i++) {
    let text = content.slice(0, i);
    let result = transfer(text);
    textElem.innerHTML = result;
    updateCursor();
    await delay(300);
  }
}

autoAppend();

function getLastTextNode(node) {
  if (node.nodeType === Node.TEXT_NODE) {
    return node;
  }
  for (let i = node.childNodes.length - 1; i >= 0; i--) {
    const child = node.childNodes[i];
    if (child.nodeType === Node.TEXT_NODE) {
      return child;
    } else {
      const lastTextNode = getLastTextNode(child);
      if (lastTextNode) {
        return lastTextNode;
      }
    }
  }
  return null;
}

function updateCursor() {
  // 1. 找到最后一个文本节点
  const lastTextNode = getLastTextNode(textElem);
  // 2. 创建新的文本节点
  const newTextNode = document.createTextNode('⭕️');
  if (!lastTextNode) {
    textElem.append(newTextNode);
  } else {
    lastTextNode.after(newTextNode);
  }
  // 3. 获取新文本的位置
  const range = document.createRange();
  range.setStart(newTextNode, 0);
  range.setEnd(newTextNode, 0);
  const rect = range.getBoundingClientRect();
  const textContainerRect = textContainer.getBoundingClientRect();
  const x = rect.left - textContainerRect.left;
  const y = rect.top - textContainerRect.top + 5;
  // 4. 设置光标位置
  cursor.style.left = `${x}px`;
  cursor.style.top = `${y}px`;
  // 5. 移除文本节点
  newTextNode.remove();
}
